import React, { Component,Fragment } from 'react';
import store  from './store';
import 'antd/dist/antd.css'
import {Button, Input,List , Popconfirm, message} from 'antd'
import {connect} from 'react-redux'

const TodoList = (props)=>{
     //结构赋值
     let {inputValue, addBtn , list ,inputChange} = props

    function confirm(store){
        console.log(store)
    }
    function cancel(store){
        console.log(store)
    }
     return ( 
         <Fragment>
             <div style={{marginTop:'10px',marginBottom:'10px'}}>
                 <Input placeholder="write something" value={inputValue} onChange={inputChange} style={{width:'250px',marginRight:'10px'}}/>
                 <Button type="primary" onClick={addBtn}>增加</Button>
             </div>
             <div style={{width:'280px'}}>
                 <List bordered dataSource={list} renderItem={(item,index)=>(
                     <List.Item>
                         <List.Item.Meta avatar={item}/>
                             <Popconfirm title={'确定删除' + item + '元素吗？'} onConfirm={confirm.bind(this,'del')} onCancel={cancel.bind(this,'del')} okText="是" cancelText="否">
                                 <Button type="primary" danger style={{marginRight:'5px'}}>删除</Button>
                             </Popconfirm>
                             
                             <Button type="ghost" >修改</Button>
                     </List.Item>
                 )}/>
             </div>
             <div>

             </div>
         </Fragment>
      );
}
//改变状态
const stateToProps = (state)=>{
    return{
        inputValue:state.inputValue,
        list:state.list
    }
}
//需要修改的状态方法
const dispatchToProps = (dispatch)=>{
    return {
        inputChange(e){
            const action = {
                type:'inputChang',
                value:e.target.value
            }
            dispatch(action)
        },
        addBtn(e){
            const action ={
                type:'addList',
            }
            dispatch(action)
        }
    }
}
 
export default connect(stateToProps,dispatchToProps)(TodoList);